<style lang="less" scoped>
.dashboard {
  position: fixed; // 关键：固定定位，占满屏幕
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f9fa;
  color: #495057;
  padding: 20px;
  overflow: auto; // 如果内容超出屏幕，允许滚动

  .dashboard-title {
    text-align: center;
    margin-bottom: 20px;
    color: #343a40;
  }

  .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 三列布局 */
    grid-gap: 20px;

    /* 面板样式 */
    .panel {
      background-color: #fff;
      border-radius: 5px;
      padding: 15px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

      .panel-title {
        font-size: 1.2rem;
        margin-bottom: 10px;
        color: #343a40;
      }
    }

    /* 左侧区域样式 */
    .left-area {
      /* 可以根据需要添加样式 */
    }

    /* 中间区域样式 */
    .middle-area {
      /* 可以根据需要添加样式 */
    }

    /* 右侧区域样式 */
    .right-area {
      /* 可以根据需要添加样式 */
    }

    /* 人员统计样式 */
    .employee-stats {
    }

    .employee-count {
      display: grid; // 使用 Grid 布局
      grid-template-columns: 1fr 1fr; // 两列布局
      gap: 10px; // 列间距

      .employee-item {
        display: flex; // 使用 Flex 布局，使子元素水平排列
        align-items: center; // 垂直居中
        text-align: left; // 文字左对齐
        padding: 5px;

        .employee-icon {
          font-size: 1.2rem;
          margin-right: 5px;
        }

        .employee-text {
          color: #6c757d;
          margin-right: 5px;
        }

        .employee-number {
          font-size: 1.3rem;
          font-weight: bold;
          color: #007bff;
          margin-right: 2px;
        }

        .employee-unit {
          color: #6c757d;
        }
      }
    }

    /* 薪酬信息样式 */
    .salary-info {
      display: flex;
      justify-content: space-around;

      .salary-box {
        text-align: center;

        .salary-title {
          font-size: 1rem;
          color: #6c757d;
        }

        .salary-amount {
          font-size: 1.3rem;
          font-weight: bold;
          color: #28a745;
        }
      }
    }

    /* 地图容器样式 */
    .map-container {
    }

    .map {
      height: 200px; /* 根据需要调整高度 */
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #6c757d;
    }

    /* 图表样式 */
    .chart {
      height: 300px; /* 根据需要调整高度 */
    }

    /* 年龄、司龄、工龄样式 */
    .age-stats {
    }

    .info-boxes {
      display: flex;
      justify-content: space-around;
      margin-bottom: 10px;

      .info-box {
        text-align: center;

        .info-label {
          color: #6c757d;
        }

        .info-value {
          font-size: 1.2rem;
          font-weight: bold;
          color: #17a2b8;
        }
      }
    }

    /* 性别统计样式 */
    .gender-stats {
    }
  }
}
</style>